<template>
	<view class="checklist">
		<view>
			<!-- 列表项 -->
			<view class="ul-order ul-order_check">
				<checkbox-group>
					<view class="li" v-for="(item, index) in list" :key="item.id" >
						<navigator url="" hover-class="none" class="con">
							<label @click="toggleSelect(index)">
								<checkbox :checked="item.checked" color="#fff" style="transform:scale(0.7)" />
							</label>
							<view class="top">
								<view class="left">
									<view class="tit">{{ item.plate }}</view>
									<view class="ps" v-if="false">
										<image class="bg" mode="widthFix" :src="imageUrl +'list/bg2.png'"></image>
										<view class="span">已认证</view>
									</view>
								</view>
								<view class="right" v-if="false">免费离开</view>
							</view>
							<view class="inner" @click="goDetail(item)">
								<view class="box">
									<view class="time">
										<view class="span2">{{ item.hours }}</view>
										小时
										<view class="span2">{{ item.minutes }}</view>
										分钟
									</view>
									<view class="video" v-if="false">
										<image class="camera" mode="widthFix" :src="imageUrl +'list/camera.svg'"></image>
										查看监控录像
									</view>
								</view>
								<view class="desc">
									<view class="p">
										<image class="icon" mode="widthFix" :src="imageUrl +'list/clock.svg'"></image>
										{{ item.inTime }} ~ {{ item.doTime }}
									</view>
									<view class="p">
										<image class="icon" mode="widthFix" :src="imageUrl +'list/map-point2.svg'"></image>
										{{ item.parkName }}
									</view>
									<view class="p">
										<image class="icon" mode="widthFix" :src="imageUrl +'list/map-point2.svg'"></image>
										{{ item.berthCode }}
									</view>
								</view>
							</view>
							<view class="dw">
								{{ item.memo }}
							</view>
							<view class="dw">
								<view class="price">
									￥
									<view class="span3">{{ (item.payCharge / 100).toFixed(2) }}</view>
								</view>
								<view class="btns" v-if="false">
									<navigator url="/pages/order/det3" class="btn btn1" hover-class="none">申诉</navigator>
								</view>
							</view>
						</navigator>
					</view>
				</checkbox-group>
			</view>
			<view class="g-ht"></view>
			<view class="g-dwbtn">
				<view class="left">
					<view class="select-all">
						<checkbox-group @change="toggleSelectAll">
							<label>
								<checkbox :checked="selectAll" color="#fff" style="transform:scale(0.7)" />
								全选
							</label>
						</checkbox-group>
					</view>
					<view class="selected-count">
						已选
						<view class="span"> {{ selectedCount }}</view>
						个
					</view>
				</view>
				<view class="right">
					<view class="selected-price">总额
						<view class="span2">￥{{ totalPrice.toFixed(2) }}</view>

					</view>
					<!--<navigator url="/pages/order/bujiao" class="btn1 btn3" hover-class="none">立即补缴</navigator>-->
					<view class="btn1 btn3" @click="goPay">立即补缴</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		post
	} from "../api/myHttps";

	export default {
		name: "checklist",
		props: {
			list: {
				type: Array,
				default: () => []
			},
		},
		data() {
			return {
				selectAll: false // 全选状态

			};
		},

		computed: {
			// 计算已选数量
			selectedCount() {
				return this.list.filter(item => item.checked).length;
			},

			// 计算总价格
			totalPrice() {
				return this.list.reduce((total, item) => {
					return item.checked ? total + item.payCharge / 100 : total;
				}, 0);
			}
		},
		methods: {
			goDetail(item) {
				uni.navigateTo({
					url: '/pages/order/aoverduepayDetail?item=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			goPay() {
				if (this.totalPrice <= 0) {
					uni.showToast({
						title: '无需支付',
						icon: 'none'
					})
					return;
				}
				let param = this.list;
				console.log(param);
				post('/city-pay/eulb/arrearMiniOrder', param).then((res) => {
					console.log(res);
					let payModeKeyword = res.payModeList.find(x => x.indexOf('weixin') > -1);

					let data = {
						method: "arrear_mini",
						bizContent: {
							parkCode: res.orderList[0].parkCode,
							parkId: res.orderList[0].parkId,
							payId: res.payId,
							cityparkOwnerId: uni.getStorageSync("ownerId"),
							subAppId: uni.getAccountInfoSync().miniProgram.appId,
							subOpenId: uni.getStorageSync("openid"),
							payModeTradeType: "JSAPI",
							payModeKeyword: payModeKeyword,
						}
					};
					post('/city-pay/eulb/prepare/pay', data).then((res) => {
						console.log(res);

						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.extendParams.timeStamp,
							nonceStr: res.extendParams.nonceStr,
							package: res.extendParams.package,
							paySign: res.extendParams.paySign,
							signType: res.extendParams.signType,
							success: function(res) {
								console.log('success:' + JSON.stringify(res));
								uni.navigateTo({
									url: '/pages/order/paysucc'
								})
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
								uni.showToast({
									title: '支付失败：' + JSON.stringify(err),
									icon: 'none'
								})
							}
						});
					})
				})
			},
			// 切换单个选项的选择状态
			toggleSelect(index) {
				this.list[index].checked = !this.list[index]?.checked;
				this.updateSelectAllStatus();
			},

			// 全选/取消全选
			toggleSelectAll(e) {
				this.selectAll = e.detail.value.length > 0;
				this.list.forEach(item => {
					item.checked = this.selectAll;
				});
			},

			// 更新全选状态（当手动选择所有项时自动勾选全选）
			updateSelectAllStatus() {
				this.selectAll = this.list.every(item => item.checked);
			}

		}
	}
</script>

<style>
	.ul-order_check {
		padding-top: 20rpx;
	}

	.ul-order_check .con {
		padding-left: 62rpx;
		position: relative;
	}

	.ul-order_check .con label {
		position: absolute;
		left: 8rpx;
		top: 20rpx;
	}

	.ul-order_check .price {
		color: #FF2C41;

	}

	.ul-order_check .dw .price .span3 {
		font-size: 48rpx;
	}

	.select-all label {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		margin-right: 10rpx;
	}

	.selected-count {
		font-size: 24rpx;
		color: rgba(28, 39, 76, 0.6);
		display: flex;
		align-items: center;
	}

	.selected-count .span {
		color: #24A7CE;
	}

	.selected-price {
		display: flex;
		align-items: center;
		font-size: 24rpx;
	}

	.selected-price .span2 {
		font-size: 32rpx;
		color: #FF2C41;
		font-weight: 600;
	}
</style>